<template>
    <div class="questionnaire">
        <div class="container">
            <div class="up-show">
                <p class="header">
          <span class="serial-num">
            <i>{{ `${(index + 1).toString().padStart(2,'0')}.` }}</i>
            <i>{{question.type === 1 ? '（单选）' : question.type === 2 ? '（多选）' : ''}}</i>
          </span>
                    <span class="progress">
            <i>{{ (index + 1).toString().padStart(2, '0') }}</i>
            /
            <i>{{questions.length}}</i>
          </span>
                </p>
                <p class="question">{{ question.question && `${question.question}?` }}</p>
                <transition-group
                        tag="ul"
                        class="options"
                        v-bind:css="false"
                        @before-enter="beforeEnter"
                        @enter="enter"
                        @after-enter="afterEnter"
                >
                    <li
                            v-for="(item,ind) in question.option_info"
                            :key="item.id"
                            @click="selectOption(item, question)"
                            :class="{active: postData[index].option.includes(item.id)}"
                            :style="{transitionDelay: ind * 0.1 + 's' }"
                    >
                        <span class="select-letter">{{String.fromCharCode(65 + ind)}}</span>
                        <span class="options-item">{{ item.option_info }}</span>
                    </li>
                </transition-group>
            </div>
            <!-- 背景层 -->
            <div class="second-page"></div>
            <div class="last-page"></div>
        </div>
        <div class="but-con">
            <div class="next" @click="nextQuestion">{{index + 1 !== questions.length ? '下一题' : '提交问卷'}}</div>
        </div>

        <!-- 提交成功的弹窗 -->
        <transition name="zoom" enter-active-class="fade-in" leave-active-class="fade-out">
            <div class="success" v-if="complete">
                <div class="content">
                    <img src="http://192.168.12.199/tslwximg/img/wjdcwc.png" alt/>
                    <p>您已完成所有的问卷调查</p>
                    <p>感谢您的参与！!</p>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
    /** @format */

    // eslint-disable-next-line no-unused-vars
    import {getQuestionId, getQuestion, postQuestion} from '../../http/common';

    export default {
        created() {
            // eslint-disable-next-line arrow-parens
            // getQuestionId().then(res => {
            //     console.log(res)
            //     this.questionId = res.data.ques_id;
            // });
            // this.questionId = null;
            this._getQuestion();
        },
        data() {
            return {
                questionId: '',
                questions: [],
                index: 0,
                postData: [],
                complete: false,
            };
        },
        computed: {
            question() {
                if (this.questions.length) {
                    return this.questions[this.index];
                }
                return {};
            },
        },
        watch: {
            /* eslint-disable arrow-parens */
        },
        methods: {
            _getQuestion() {
                getQuestion()
                    .then(res => {
                        this.questions = res.data.info;
                        this.questionId = res.data.info[0].ques_id;
                        // eslint-disable-next-line arrow-parens
                        this.questions.forEach(item => {
                            this.postData.push({
                                ques_type: item.type,
                                questionId: item.id,
                                option: [],
                                ques_option: [],
                            });
                        });
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            nextQuestion() {
                if (!this.questions.length) return;
                if (this.index + 1 !== this.questions.length) {
                    if (this.postData[this.index].option.length) {
                        this.index += 1;
                    } else {
                        this.$dialog.toast({
                            mes: '请选择选项',
                            icon: 'error',
                            timeout: 1500,
                        });
                    }

                    return;
                }
                if (this.postData[this.index].option.length) {
                    this.submitQuestion();
                } else {
                    this.$dialog.toast({
                        mes: '请选择选项',
                        icon: 'error',
                        timeout: 1500,
                    });
                }
            },
            selectOption(option, question) {
                // eslint-disable-next-line arrow-parens
                this.postData.forEach(item => {
                    if (question.id === item.questionId) {
                        const index = item.option.indexOf(option.id);
                        const obj = {
                            option_id: option.id,
                            option_type: option.option_type,
                            ques_option_text: '',
                        };
                        if (question.type === 1) {
                            item.ques_option = [];
                            item.option = [];
                            if (index !== -1) {
                                item.option.splice(index, 1);
                                item.ques_option.splice(index, 1);
                            } else {
                                item.option.push(option.id);
                                item.ques_option.push(obj);
                            }
                        } else if (question.type === 2) {
                            if (index !== -1) {
                                item.option.splice(index, 1);
                                item.ques_option.splice(index, 1);
                            } else {
                                item.option.push(option.id);
                                item.ques_option.push(obj);
                            }
                        }
                    }
                });

                // console.log(this.postData);
            },
            /* eslint-disable arrow-parens */
            submitQuestion() {
                postQuestion({
                    ques_id: this.questionId,
                    num: this.index + 1,
                    data: this.postData,
                })
                    .then(res => {
                        console.log(res);
                        if (res.status == 1) {
                            if (res.data.code == 'success') {
                                this.complete = true;
                            }
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            beforeEnter(el) {
                el.style.opacity = 0;
                el.style.transform = 'translate(100%,0)';
            },
            enter(el, done) {
                el.style.opacity = 1;
                setTimeout(() => {
                    el.style.transform = 'translate(0,0)';
                });
                done();
            },
            afterEnter(el) {
                setTimeout(() => {
                    el.style.transitionDelay = '0s';
                }, 200);
            },
        },
    };
</script>
<style lang="scss" scoped>
    /** @format */
    /*@import '../css/mixins.less';*/
    /** @format */

    .questionnaire {
        position: relative;
        padding: 30px 50px;
        background-color: #EEEEEE;
        min-height: 100vh;
    }

    .questionnaire .container {
        position: relative;
        height: 820px;
    }

    .questionnaire .container .up-show {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 716px;
        padding: 40px 50px;
        background-color: #fff;
        z-index: 3;
    }

    .questionnaire .container .up-show .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30px;
        line-height: 2;
        font-weight: 500;
    }

    .questionnaire .container .up-show .header .serial-num {
        color: #000;
    }

    .questionnaire .container .up-show .header .progress {
        color: #323232;
    }

    .questionnaire .container .up-show .header .progress > i:first-of-type {
        color: #be2839;
    }

    .questionnaire .container .up-show .question {
        margin-top: 30px;
        margin-bottom: 40px;
        font-size: 30px;
        line-height: 1.683;
        text-align: left;
        color: #323232;
    }

    .questionnaire .container .up-show .options {
        max-height: calc(100% - 61px - 70px - 30px * 1.683);
        min-height: calc(100% - 61px - 70px - 90px * 1.683);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .questionnaire .container .up-show .options > li {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        line-height: 60px;
        border-radius: 28px;
        background: #F6F6F6;
        text-align: center;
        transition: all 0.4s ease;
    }

    .questionnaire .container .up-show .options > li .select-letter {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        font-size: 32px;
        line-height: 48px;
        border-radius: 50%;
        color: #fff;
        background-color: #F28000;
    }

    .questionnaire .container .up-show .options > li .options-item {
        width: 100%;
        padding-left: 60px;
        padding-right: 60px;
        font-size: 26px;
        color: #323232;
        word-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-align: center;
    }

    .questionnaire .container .up-show .options > li.active {
        background-color: #F28000;
    }

    .questionnaire .container .up-show .options > li.active .options-item {
        color: #fff;
    }

    .questionnaire .container .second-page {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        width: 600px;
        height: 768px;
        transform: translate(-50%, -50%);
        background-color: rgba(255, 255, 255, 0.6);
    }

    .questionnaire .container .last-page {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        width: 516px;
        height: 100%;
        transform: translate(-50%, -50%);
        background-color: rgba(255, 255, 255, 0.6);
    }

    .questionnaire .but-con {
        margin-top: 84px;
    }

    .questionnaire .but-con .next {
        margin: 0 auto;
        width: 480px;
        text-align: center;
        line-height: 72px;
        font-size: 34px;
        font-weight: 500;
        color: #fff;
        background: linear-gradient(90deg, rgba(241, 127, 42, 1), rgba(228, 114, 29, 1));
        border-radius: 36px;
    }

    .questionnaire .success {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }

    .questionnaire .success .content {
        position: absolute;
        top: 10vh;
        left: 0;
        width: 100%;
        text-align: center;
    }

    .questionnaire .success .content > img {
        display: block;
        margin: 0 auto;
        margin-bottom: 1em;
        width: 324px;
        height: 256px;
    }

    .questionnaire .success .content > p {
        font-size: 30px;
        line-height: 1.8;
        font-weight: 600;
    }

    .fade-in-right {
        animation: fadeInRight 0.4s ease;
    }

    @keyframes fadeInRight {
        0% {
            opacity: 0;
            transform: translate3d(100%, 0, 0);
        }
        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
</style>
